<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学校通知统计</title>
	<link rel="stylesheet" href="/css/bootstrap.min14ed.css">
	<link rel="stylesheet" href="/css/font-awesome.min.css">
	<link rel="stylesheet" href="/css/animate.min.css">
	<link rel="stylesheet" href="/css/style.min862f.css">
	<script src="/js/vue.min.js"></script>
	<script src="/js/vue-resource.min.js"></script>
	<script src="/js/plugins/laydate/laydate.js"></script>
	<style>
	.forum-img{
		float: left;
		width: 46px;
		height: 46px;
		margin-right: 20px;
		overflow: hidden;
	}
	.forum-img-c{
		border-radius: 50%;

	}
	.forum-img img{
		width: 100%;
	}
	.forum-content{
		text-align: left;
		margin: 0;
	}
	.forum-desc{
		padding-top: 6px;
	}
	.clear{
		clear: both;
	}
	</style>
</head>
<body class="gray-bg">
	<div id="box" class="wrapper wrapper-content animated fadeInRight">
	  <div class="ibox-content m-b-sm">
	  <div class="row">
	      <div class="col-xs-11">
	        <div class="row">
	          <div class="col-xs-3">
		        <select class="form-control" v-model="s_school">
		          <option v-for="item in allschool" :value="item.id">{{item.school}}</option>
		        </select>
		      </div>
		      <div class="col-xs-3">
		        <select class="form-control" v-model="s_period">
		          <option>一周内</option>
		          <option>一月内</option>
		          <option>三月内</option>
		          <option>半年内</option>
		          <option>一年内</option>
		        </select>
		      </div>
		      <div class="col-xs-3">
		        <input type="text" class="form-control layer-date" id="rangedate" v-model="s_date">
		      </div>
		      <div class="col-xs-3">
		        <input type="text" placeholder="关键字" class="form-control" v-model="s_key">
		      </div>
	        </div>
	      </div>
	      <div class="col-xs-1">
	        <button class="btn btn-primary" @click="updateData()">
	          <i class="fa fa-search"></i> 搜索
	        </button>
	      </div>
	    </div>
	  </div>
	  <div class="ibox-content forum-container">
	    <div class="pull-right forum-desc">
	      通知总数：{{noticeSum}} 条
	    </div>
	    <h3>学校通知</h3>
	    <div class="forum-item" v-for="item in noticelist">
	      <div class="row">
	        <div class="col-sm-2">
	          <div class="forum-img forum-img-c">
	            <img :src="'/image/schoollogo/'+item.schoolId+'.png'" alt="">
	          </div>
	          <h3>{{item.school}}</h3>
	        </div>
	        <div class="col-sm-2 forum-info">
	          <a href="#" class="forum-item-title">{{item.title}}</a>
	          <div>
	            <small>标题</small>
	          </div>
	        </div>
	        <div class="col-sm-6 forum-info">
	          <p class="forum-content">{{item.content}}</p>
	        </div>
	        <div class="col-sm-2 forum-info">
	          <h3>{{item.createdTime | date}}</h3>
	          <div>
	            <small>发布日期</small>
	          </div>
	        </div>
	      </div>
	    </div>
	    <div>
	      <page v-if="pageShow" :msg="listSum"></page>
	      <div class="clear"></div>
	    </div>
	  </div>
	</div>

	<template id="nunpanel">
	  <div class="widget style1 navy-bg">
	    <div class="row">
	      <div class="col-xs-4 text-center">
	        <i :class="'fa fa-'+message.icon+' fa-5x'"></i>
	      </div>
	      <div class="col-xs-8 text-right">
	        <h2 class="font-bold">{{message.num1}}</h2>
	        <span>{{message.title1}}</span>
	        <h2 class="font-bold"><span>{{message.num2}}</h2>
	        <span>{{message.title2}}</span>
	      </div>
	    </div>
      </div>
	</template>
	<template id="page">
	  <ul class="pagination pull-right">
        <li v-show="current != 1" @click="current-- && goto(current)"><a href="javascript:">&laquo;</a></li>
        <li v-for="index in pages" @click="goto(index)" :class="{'active':current==index}" :key="index">
          <a href="javascript:">{{index}}</a>
        </li>
        <li v-show="allpage != current && allpage != 0" @click="current++ && goto(current++)">
          <a href="javascript:">&raquo;</a>
        </li>
      </ul>
	</template>
</body>
<script>
  //import NumPanel from './components/numPanel.vue'
  Vue.filter('date',function(input){
    if((input+'').length==10){
		var oDate = new Date();
		oDate.setTime(input*1000);
	}else{
		var oDate=new Date(input);
	}
         y = oDate.getFullYear();
         M = (oDate.getMonth()+1);
         M = M<10?'0'+M:''+M;
         d = oDate.getDate();
         d = d<10?'0'+d:''+d;
     return y+'-'+M+'-'+d;
  });

  var vm = new Vue({
  	el: '#box',
  	created: function(){
  		this.getData();
  	},
  	mounted: function(){
  		this.s_date = this.initialDate();
  		laydate.render({
  			elem:'#rangedate',
	  	    range: true,
	  	    done: function(value, date, endDate){
	  				vm.s_date = value;
	  				vm.s_period = '';
			}
  		});
  	},
  	data: {
  		allschool: [],
  		s_school: '00',
  		noticeSum: '',
  		noticelist: [],
  		s_period: '半年内',
  		s_date: '',
  		s_key: '',
  	},
  	computed: {
  		s_date: function(){
  			return this.initialDate();
  		},
  		pageShow: function(){
  			if(this.listSum>10){
  				return true;
  			}else{
  				return false;
  			}
  		},
  		listSum: function(){
  			return this.noticeSum;
  		}
  	},
  	watch:{
  		s_period: function(){
  			this.s_date = this.initialDate();
  		},
  	},
  	methods:{
  		formatDate(date){
  			var y = date.getFullYear();  
		    var m = date.getMonth() + 1;  
		    m = m < 10 ? '0' + m : m;  
		    var d = date.getDate();  
		    d = d < 10 ? ('0' + d) : d;  
		    return y + '-' + m + '-' + d;
  		},
  		initialDate(){
  			var today = new Date();
  			today = this.formatDate(today);
  			var beginDate = new Date();
  			switch(this.s_period){
  				case '一周内':
  				    beginDate.setDate(beginDate.getDate()-6);
  				    beginDate = this.formatDate(beginDate);
  					return beginDate+' - '+today;
  				    break;
  				case '一月内':
  				    beginDate.setMonth(beginDate.getMonth()-1);
  				    beginDate.setDate(beginDate.getDate()+1);
  				    beginDate = this.formatDate(beginDate);
  					return beginDate+' - '+today;
  				    break;
  				case '三月内':
  				    beginDate.setMonth(beginDate.getMonth()-3);
  				    beginDate.setDate(beginDate.getDate()+1);
  				    beginDate = this.formatDate(beginDate);
  					return beginDate+' - '+today;
  				    break;
  				case '半年内':
  				    beginDate.setMonth(beginDate.getMonth()-6);
  				    beginDate.setDate(beginDate.getDate()+1);
  				    beginDate = this.formatDate(beginDate);
  					return beginDate+' - '+today;
  				    break;
  				case '一年内':
  				    beginDate.setFullYear(beginDate.getFullYear()-1);
  				    beginDate.setDate(beginDate.getDate()+1);
  				    beginDate = this.formatDate(beginDate);
  					return beginDate+' - '+today;
  				    break;
  				default:
  				    return this.s_date;
  				    break;
  			}
  		},
  		getData(){  
		    var that = this;
		    that.$http({
		    	method: 'POST',
		    	url: '/notice/getNoticeData'
		    }).then(function(res){
		    	
		    	this.allschool=res.data.allschool;
		    	this.allschool.unshift({id:'00',school:'全部'});
  				this.noticeSum=res.data.noticeSum;
  				this.noticelist=res.data.noticelist;

		    },function(err){});
		    
  		},
  		updateData(){  
		    var that = this;
		    that.$http.post('/notice/updateNoticeData', {
		    	school: this.s_school,
		    	date: this.s_date,
		    	key: this.s_key
		    }, {emulateJSON:true}).then(function(res){

  				this.noticeSum=res.data.noticeSum;
  				this.noticelist=res.data.noticelist;

		    },function(err){});
		    
  		},
  		updatePage(index,item){
  			var that = this;
		    that.$http.post('/notice/paging', {
		    	listIndex: index,
		    	showItem: item
		    }, {emulateJSON:true}).then(function(res){
  				this.noticelist=res.body.noticelist;

		    },function(err){});
  		},
  	},
  	components:{
      'Nunpanel':{
		template:'#nunpanel',
		props: ['message'],
	  },
	  'page':{
	  	template: '#page',
	  	props: ['msg'],
	  	data: function(){
	  		return{
  		      current: 1,
  		      showItem: 10,
	  		}
	  	},
	  	computed: {
	  		allpage: function(){
	  			return Math.ceil(this.msg/this.showItem);
	  		},
	  		pages: function(){
	  			var pag = [];
	  			if(this.current < this.showItem){
	  				var i = Math.min(this.showItem, this.allpage);
	  				while(i){
	  					pag.unshift(i--);
	  				}
	  			}else{
	  				var middle = this.current - Math.floor(this.showItem/2);
	  				i = this.showItem;
	  				if(middle > (this.allpage - this.showItem)){
	  					middle = (this.allpage - this.showItem) + 1
	  				}
	  				while(i--){
	  					pag.push( middle++ );
	  				}
	  			}
	  			return pag;
	  		}
	  	},
	  	methods: {
	  		goto: function(index){
	  			this.current = index;
	  			var item = this.showItem;
	  			//ajax
	  			this.$parent.updatePage(index,item);
	  			
	  		}
	  	}
	  },
    }
  })
</script>
</html>